<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app">
    =={{msg}}===<br>
    {{totle('你好我是计算属性的传参')}}
    <hr />
    姓名： <input type="text" v-model="name">
    分数:<input type="text" v-model.number="score">
    <button @click="add">添加</button>
    <ul>
      <li v-for="(item, index) in arr" :key="item.id">
        {{item.id}}==={{item.name}}==={{item.subject}}===={{item.score}}===
        <button @click="del(index)">删除</button>
      </li>
    </ul>

    自动求班级的平均值:==={{avg}}
  </div>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.14/vue.min.js"></script>
  <script>
    var vm = new Vue({
      el: "#app",
      data: {
        msg: 'hello  vue',
        name: '',
        score: '',
        arr: [
          { id: 1, name: 'jack', subject: '数学', score: 80 },
          { id: 2, name: 'rose', subject: '数学', score: 70 },
          { id: 3, name: 'tom', subject: '数学', score: 90 }
        ],
      },
      methods: {
        del(id) {
          this.arr.splice(id, 1)
        },
        add() {
          this.arr.push(
            {
              id: Date.now(),
              name: this.name,
              score: this.score,
              subject: '数学'
            }
          )

          this.name = this.score = ''
        }
      },
      computed: {
        avg() {
          return this.arr.reduce((sum, item) => sum + item.score, 0) / this.arr.length
        },
        //计算属性传参写法,返回一个函数,可以巧妙的用返回函数的参数
        totle() {
          return function (str) {

            return this.name + '||' + str
          }
        }
      }
    })

    // console.log(vm, 2222);
  </script>
</body>

</html>